<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商城首页</title>
    <link rel="stylesheet" th:href="@{/static/css/minireset.css}" />
    <link rel="stylesheet" th:href="@{/static/css/common.css}" />
    <link rel="stylesheet" th:href="@{/static/css/iconfont.css}" />
    <link rel="stylesheet" th:href="@{/static/css/index.css}" />
    <link rel="stylesheet" th:href="@{/static/css/swiper.min.css}" />
    <script language="JavaScript" th:src="@{/static/script/vue.js}"></script>
    <script language="JavaScript" th:src="@{/static/script/axios.min.js}"></script>
    <script language="JavaScript" th:src="@{/static/script/index.js}"></script>
  </head>
  <body>
    <div  id = "index_div">
      <div class="topbar">
        <div class="w">
          <div class="topbar-left">
          </div>
          <div class="topbar-right" th:if="${session.loginuser==null}">
            <a th:href="@{/page.do?operate=page&page=login}" class="regist">登录</a>
            <a th:href="@{/cart.do}" class="cart iconfont icon-gouwuche">
              购物车
            </a>
            <a th:href="@{/page.do?operate=page&page=regist}" class="register">注册</a>
            </a>
          </div>
          <div class="topbar-right" th:unless="${session.loginuser==null}">
            <!--登录后风格-->
            <span>欢迎你<b th:text="${session.loginuser.getUser_name()}">张总</b></span>
            <a th:href="@{/page.do?operate=page&page=login}" class="register">注销</a>
            <a th:href="@{/cart.do}" class="cart iconfont icon-gouwuche">
              购物车
              <div class="cart-num" >{{kind}}</div>
            </a>
            <a th:if="${session.loginuser.role==1}"
                   th:href="@{/Commodity.do?operate=seller}" class="admin">我的店铺
            </a>
            <a th:if="${session.loginuser.role==3}"
               th:href="@{/User.do?operate=courier}" class="admin">我的接单
            </a>
            <a th:if="${session.loginuser.role==0}"
               th:href="@{/User.do?operate=admin}" class="admin">后台管理
            </a>
          </div>
        </div>
      </div>
      <div class="header w">
        <div class="header-nav">
          <ul>
            <li><a href="#">java</a></li>
            <li><a href="#">前端</a></li>
            <li><a href="#">小说</a></li>
            <li><a href="#">文学</a></li>
            <li><a href="#">青春文学</a></li>
            <li><a href="#">艺术</a></li>
            <li><a href="#">管理</a></li>
          </ul>
        </div>
      </div>
      <div class="books-list ">
        <div class="w">
          <div class="list">
            <div class="list-header">
              <div class="title">店家列表</div>
            </div>
            <div class="list-content" >
              <div href="" class="seller-item" th:each="user : ${session.sellerList}" th:object="${user}">
                <a th:href="@{|/Commodity.do?operate=shop&ID=*{user_ID}|}" class="cart iconfont " th:text="*{user_name}">
                </a>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="banner w clearfix">
        <div class="banner-left">
          <ul>
            <li>
              <a href="">
                <span>文学 鉴赏</span>
                <i class="iconfont icon-jiantou"></i
              ></a>
            </li>
            <li>
              <a href="">
                <span>社科 研究</span>
                <i class="iconfont icon-jiantou"></i
              ></a>
            </li>
            <li>
              <a href="">
                <span>少儿 培训</span>
                <i class="iconfont icon-jiantou"></i
              ></a>
            </li>
            <li>
              <a href="">
                <span>艺术 赏析</span>
                <i class="iconfont icon-jiantou"></i
              ></a>
            </li>
            <li>
              <a href="">
                <span>生活 周边</span>
                <i class="iconfont icon-jiantou"></i
              ></a>
            </li>
            <li>
              <a href="">
                <span>文教 科技</span>
                <i class="iconfont icon-jiantou"></i
              ></a>
            </li>
            <li>
              <a href="">
                <span>热销 畅读</span>
                <i class="iconfont icon-jiantou"></i
              ></a>
            </li>
          </ul>
        </div>
        <div class="banner-right">
          <div class="swiper-container">
            <ul class="swiper-wrapper">
              <li class="swiper-slide">
                <img src="./static/uploads/banner4.jpg" alt="">
                <!-- <div class="banner-img"></div> -->
              </li>
              <li class="swiper-slide">
                <img src="./static/uploads/banner5.jpg" alt="">
                <!-- <div class="banner-img"></div> -->
              </li>
              <li class="swiper-slide">
                <img src="./static/uploads/banner6.jpg" alt="">
                <!-- <div class="banner-img"></div> -->
              </li>
            </ul>
            <div class="swiper-button-prev"></div>

            <div class="swiper-button-next"></div>

            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
          </div>
        </div>
      </div>
      <div class="header w">
        <div class="header-search" >
          <form action=""  style="float:left;width:60%;">
            <input type="text" name="key" placeholder="请输入商品名查询" v-model="Key" />
          </form>
          <input type="button" value="查询" class="icon-search" style="border: none;border-left: 1px solid #000; outline:none;cursor:pointer;background-color: #f5f5f500;color: #ff1018" @click="onSubmit()"/>
        </div>
      </div>
      <div class="books-list ">
        <div class="w">
          <div class="list">
            <div class="list-content" >
              <div href="" class="list-item" v-for="Commodity in commoditylist">
                <img v-bind:src="'static/uploads/'+Commodity.commodity_IMG" alt="">
                <p >商品名:{{Commodity.commodity_name}}</p>
                <p >商家:{{Commodity.saller.user_name}}</p>
                <p >价格:{{Commodity.price}}</p>
                <p >销量:{{Commodity.saleCount}}</p>
                <p >库存:{{Commodity.inventory}}</p>
                <button @click="addCart(Commodity.commodity_ID)">加入购物车</button>
              </div>
            </div>
          </div>
        </div>
       
      </div>
      <div class="cate w">
        <div class="list">
          <a href="" class="list-item">
            <i class="iconfont icon-java"></i>
            <span>java</span>
          </a>
          <a href="" class="list-item"
            ><i class="iconfont icon-h5"></i>h5</a
          >
          <a href="" class="list-item">
            <i class="iconfont icon-python"></i>python
          </a>
          <a href="" class="list-item"
            ><i class="iconfont icon-tianchongxing-"></i>pm</a
          >
          <a href="" class="list-item"
            ><i class="iconfont icon-php_elephant"></i>php</a
          >
          <a href="" class="list-item"
            ><i class="iconfont icon-go"></i>go</a
          >
        </div>
        <a href="" class="img">
          <img src="./static/uploads/cate4.jpg" alt="" />
        </a>
        <a href="" class="img">
          <img src="./static/uploads/cate5.jpg" alt="" />
        </a>
        <a href="" class="img">
          <img src="./static/uploads/cate6.jpg" alt="" />
        </a>
      </div>
      <div class="books">
        <div class="w">
          <div class="seckill">
            <div class="seckill-header">
              <div class="title">
                图书秒杀
              </div>
            </div>
            <div class="seckill-content">
             
                  <a href="" class="tip"> 
                     <h5>距离结束还有</h5>
                     <i class="iconfont icon-shandian"></i>
                     <div class="downcount">
                      <span class="time">00</span>
                      <span class="token">:</span>
                      <span class="time">00</span>
                      <span class="token">:</span>
                      <span class="time">00</span>
                     </div>
                  </a>
              
              
                  <a href="" class="books-sec">
                    <img src="./static/uploads/congwanqingdaominguo.jpg" alt="">
                    <p>从晚晴到民国</p>
                    <div>
                      <span class="cur-price">￥28.9</span>
                      <span class="pre-price">￥36.5</span>
                    </div>
                    <button>立即购买</button>
                  </a>
                  <a href="" class="books-sec">
                    <img src="./static/uploads/cyuyanrumenjingdian.jpg" alt="">
                    <p>c语言入门经典</p>
                    <div>
                      <span class="cur-price">￥55.9</span>
                      <span class="pre-price">￥68.5</span>
                    </div>
                    <button>立即购买</button>
                  </a>
                  <a href="" class="books-sec">
                    <img src="./static/uploads/fusang.jpg" alt="">
                    <p>扶桑</p>
                    <div>
                      <span class="cur-price">￥30.9</span>
                      <span class="pre-price">￥47.5</span>
                    </div>
                    <button>立即购买</button>
                  </a>
                  <a href="" class="books-sec">
                    <img src="./static/uploads/geihaizideshi.jpg" alt="">
                    <p>给孩子的诗</p>
                    <div>
                      <span class="cur-price">￥18.9</span>
                      <span class="pre-price">￥25.5</span>
                    </div>
                    <button>立即购买</button>
                  </a>
              </ul>
            </div>
          </div>
        </div>
      </div>

    </div>
    <script src="./static/script/swiper.min.js"></script>
    <script>
      var swiper = new Swiper('.swiper-container', {
        autoplay: true,
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
    </script>
  </body>
</html>
